<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>state</title>
</head>
<body>
  <div id="app"></div>

  
    <!-- 引入文件 -->
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

<script type="text/babel">
// 1.创建类式组件
class MyCpn extends React.Component{
  // 构造器调用几次？ --- 1次
  constructor(props){
    super(props)
    // 初始化状态
    this.state = {
      isHot:true,
      type:'哇哈哈椰奶'
    }
    /*
    ### 改变this指向 ###
    this.changeTemp是实例对象中的方法
    this.changeFn是类原型对象中的方法
    使用bind改变this.changeFn的this指向，并将返回的新方法赋值给实例对象
    all会立即调用方法，所以不能使用
    */ 
    this.changeTemp = this.changeFn.bind(this)
  }

  // render调用几次？ --- 1+n次   1为初始化时调用，n为state刷新次数
  render(){
    console.log(this,'render渲染')
    // 绑定事件（注意事件名需用驼峰写法
    return <h2 onClick={this.changeTemp}>{this.state.type}现在是{this.state.isHot?'热的':'冷的'}</h2> 
  }

  // changeFn调用几次？ --- 点几次调用几次
  changeFn(){
    // changeFn 放在哪里？ ---MyCpn的原型对象，供实例使用
    // 由于changeFn 是作为 onClick 的回调，所以不是通过实例调用的，而是直接调用
    // 类中的方法默认开启了严格模式，所以 changeFn 中的的this 为 undefined
    console.log('修改state中的值',this)

    // 获取原来的isHot值
    const isHot = this.state.isHot
    // 注意：状态（state）不可直接更该  !!! 下面这行就是直接更改
    // this.state.isHot = !isHot  //错误写法

    // 注意：状态（state）必须通过setState更新
    // 更新动作是一种合并，复写同名key的value值
    this.setState({isHot:!isHot})
    console.log(this.state.isHot)

  }
}
// 2.渲染组件
ReactDOM.render(<MyCpn/>,document.getElementById('app'))

</script>


</body>
</html>